<template>
	<div class="lmenu" v-if="menus.length">
		<h3>{{ title }}<span :class="showMenu ? 'active' : 'normal'" @click="openMenu"></span></h3>
		<el-collapse-transition>
			<div v-show="showMenu">
				<el-menu class="custom-menu-hover-color" ref="menu" @select="selectMenu" :default-active="defaultActive">
					<div v-for="item in menus" :key="item.colPath">
						<el-submenu v-if="item.children && item.children.length" :index="item.colId" v-bottom>
							<template slot="title">
								<span>{{ item.colTitle }}</span>
							</template>
							<el-menu-item v-for="child in item.children" :key="child.colPath" :index="child.colId">
								{{ child.colTitle }}
							</el-menu-item>
						</el-submenu>
						<el-menu-item v-else :index="item.colId" v-bottom>
							<span slot="title">{{ item.colTitle }}</span>
						</el-menu-item>
					</div>
				</el-menu>
			</div>
		</el-collapse-transition>
	</div>
</template>

<script>
export default {
	directives: {
		bottom: {
			bind(el) {
				let icon = el.getElementsByClassName('el-submenu__icon-arrow el-icon-arrow-down')[0]
				if (icon) {
					icon.className = 'el-submenu__icon-arrow el-icon-caret-bottom'
					icon.style.fontSize = '18px'
				}
			},
		},
	},
	props: {
		// menu结构 数据源
		/* {
              name: '',         // 显示名称
              path: '',         // 跳转路径、索引
              children: []      // 子菜单
            } */
		menus: {
			type: Array,
			default: () => {
				return []
			},
		},
		// 默认选项
		activeIndex: {
			type: String,
			default: '',
		},
		// 显示名称
		title: {
			type: String,
			default: '',
		},
		// 是否展示菜单
		expand: {
			type: Boolean,
			default: true,
		},
	},
	watch: {
		expand(nv) {
			this.showMenu = nv
		},
		activeIndex(nv) {
			this.defaultActive = nv
		},
	},
	mounted() {
		window.addEventListener('resize', this.handleResize, true)
	},
	data() {
		return {
			showMenu: this.expand,
			defaultActive: '',
		}
	},
	methods: {
		// 展开菜单
		openMenu() {
			this.showMenu = !this.showMenu
		},
		// 选中菜单
		selectMenu(path, indexPath) {
			let item = null
			for (let index = 0; index < this.menus.length; index++) {
				const element = this.menus[index]
				item = this.findNodeById(element, path)
				if (item) break
			}
			if (item) {
				this.$emit('selectMenu', { path, indexPath, item })
			}
		},
		openIndex(index) {
			// 展开索引菜单
			this.$refs.menu.open(index)
		},
		handleResize() {
			this.screenWidth = window.innerWidth
			if (this.screenWidth >= 1024) {
				this.showMenu = true
			}
		},
		findNodeById(root, activeIndexPath) {
			if (root.colId === activeIndexPath) {
				return root
			}
			for (let child of root.children) {
				const result = this.findNodeById(child, activeIndexPath)
				if (result) {
					return result
				}
			}
			return null
		},
	},
	beforeDestroy() {
		window.removeEventListener('resize', this.handleResize)
	},
}
</script>

<style lang="scss" scoped>
$clickColor: $mainColor;

@media (max-width: 576px) {
	h3 {
		font-size: 18px !important;
	}
}

.el-menu-item {
	background-color: white;
}

.el-menu-item.is-active {
	background-color: $mainColor !important;
	border-left: 6px solid $clickColor;
	color: white;
    font-weight: bold;
}

.el-menu-item:hover {
	border-left: 6px solid $clickColor;
	color: $clickColor;
}

.el-submenu ::v-deep.el-submenu__title:hover {
	border-left: 6px solid $clickColor;
	color: $clickColor;
	// background-color: #41a3fb !important;
}

@media screen and (max-width: 1024px) {
	.lmenu h3 {
		height: 55px !important;
		line-height: 55px !important;
		margin-right: 0;
		font-size: 20px;

		span {
			float: right;
			width: 40px;
			height: 40px;
			margin-top: 7px;
			background: url(../../assets/images/close2.png) no-repeat;
			background-position: center center;
			background-size: 20px;
			transition: all 0.3s;

			&.active {
				transform: rotateZ(45deg) !important;
			}

			&.normal {
				transform: rotateZ(0) !important;
			}
		}
	}
}

.lmenu {
	h3 {
		font-family: '微软雅黑';
		text-align: left;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		outline: none;
		/*background: #529e2f;*/
		background: $mainColor;
		color: #fff;
		padding-left: 25px;
		line-height: 80px;
		font-weight: 600;
		// margin-right: 10px;
		font-size: 24px;
	}

	ul {
		color: #333;
		font-size: 16px;
		font-family: '微软雅黑';
		text-align: left;
		padding: 0;
		margin: 0;
		box-sizing: border-box;
		outline: none;
		// box-shadow: 5px 5px 5px rgba(0, 0, 0, .05);
		/*border-left: 8px solid #529e2f;*/
		border-left: 8px solid $mainColor;
		background-position: right bottom;
		border-bottom: 1px solid #e6e6e6;
	}
}
/* 添加一个自定义类 .custom-menu-hover-color */
.custom-menu-hover-color .el-menu-item:hover,
.custom-menu-hover-color .el-submenu__title:hover {
	background-color: $mainColor !important; /* 这里设置你想要的颜色 */
    color: white;
}
</style>
